<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="/static/image/favicon.png" type="image/png">
    <title>RPA数据看板</title>
    <link rel="stylesheet" href="/static/css/style.css">
    <!-- 引入 Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <!-- 引入 Chart.js 数据标签插件 -->
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
    <!-- 引入 Flatpickr 日期选择器 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/zh.js"></script>
</head>
<body>
    <div class="container">
        <header>
            <h1>RPA 每日数据看板</h1>
            <div class="last-updated">最后更新: <span id="last-updated">--</span></div>
        </header>

        <!-- 顶部卡片区域 -->
        <section class="summary-cards">
            <div class="card success-card">
                <div class="card-icon">✓</div>
                <div class="card-content">
                    <h2>成功</h2>
                    <div class="card-value" id="success-count">0</div>
                </div>
            </div>
            <div class="card running-card">
                <div class="card-icon">⟳</div>
                <div class="card-content">
                    <h2>运行中</h2>
                    <div class="card-value" id="running-count">0</div>
                </div>
            </div>
            <div class="card failed-card">
                <div class="card-icon">✗</div>
                <div class="card-content">
                    <h2>失败</h2>
                    <div class="card-value" id="failed-count">0</div>
                </div>
            </div>
        </section>

        <!-- 中间图表区域 -->
        <section class="chart-section">
            <div class="chart-container glass-panel">
                <div class="chart-header">
                    <h2>RPA实时任务状态趋势</h2>
                    <button id="toggle-bank-status" class="toggle-btn">
                        <i class="icon">📊</i> RPA执行详情
                    </button>
                </div>
                <canvas id="trend-chart"></canvas>
            </div>
        </section>

        <!-- 底部表格区域 -->
        <section class="table-section" id="bank-status-section" style="display: none;">
            <div class="table-container glass-panel">
                <div class="table-header">
                    <div class="table-title">
                        <h2>RPA执行详情</h2>
                        <span class="table-subtitle">查看所有RPA执行记录</span>
                    </div>
                    <div class="filters">
                        <div class="filter-group">
                            <label for="status-filter">状态:</label>
                            <select id="status-filter">
                                <option value="">全部</option>
                                <option value="成功">成功</option>
                                <option value="失败">失败</option>
                                <option value="运行中">运行中</option>
                            </select>
                        </div>
                        <div class="time-range-filter">
                            <label>时间范围:</label>
                            <div class="time-range-inputs">
                                <input type="text" id="start-time" placeholder="开始时间" class="time-input">
                                <div class="time-input-separator">至</div>
                                <input type="text" id="end-time" placeholder="结束时间" class="time-input">
                            </div>
                            <button id="apply-time-filter" class="time-filter-btn">
                                <i class="icon">🔍</i>
                                <span>应用</span>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="table-responsive">
                    <table id="tasks-table">
                        <thead>
                            <tr>
                                <th>RPA名称</th>
                                <th>状态</th>
                                <th>开始时间</th>
                                <th>结束时间</th>
                                <th>执行耗时</th>
                                <th>报错原因</th>
                            </tr>
                        </thead>
                        <tbody id="tasks-body">
                            <!-- 任务数据将通过 JavaScript 动态填充 -->
                        </tbody>
                    </table>
                </div>
                <!-- 分页控件 -->
                <div class="pagination-container">
                    <div class="pagination-info">
                        显示 <span id="showing-start">1</span>-<span id="showing-end">10</span> 条，共 <span id="total-records">0</span> 条
                    </div>
                    <div class="pagination-controls">
                        <button id="prev-page" class="pagination-btn" disabled>上一页</button>
                        <div id="page-numbers" class="page-numbers">
                            <!-- 页码将通过 JavaScript 动态填充 -->
                        </div>
                        <button id="next-page" class="pagination-btn">下一页</button>
                    </div>
                    <div class="pagination-size">
                        <label for="page-size">每页显示:</label>
                        <select id="page-size">
                            <option value="10" selected>10</option>
                            <option value="20">20</option>
                            <option value="50">50</option>
                            <option value="100">100</option>
                        </select>
                    </div>
                </div>
            </div>
        </section>

        <!-- 月度RPA执行统计区域 -->
        <section class="chart-section monthly-stats-section">
            <div class="chart-container glass-panel monthly-stats-panel">
                <div class="monthly-stats-header">
                    <div class="monthly-stats-title-container">
                        <div class="monthly-stats-title">
                            <h2>月度RPA执行统计</h2>
                            <span class="monthly-stats-subtitle">按RPA名称统计执行情况</span>
                        </div>
                        <div class="time-range-filter monthly-time-filter">
                            <label>时间范围:</label>
                            <div class="time-range-inputs">
                                <input type="text" id="monthly-start-time" placeholder="开始时间" class="time-input">
                                <div class="time-input-separator">至</div>
                                <input type="text" id="monthly-end-time" placeholder="结束时间" class="time-input">
                            </div>
                            <button id="apply-monthly-time-filter" class="time-filter-btn">
                                <i class="icon">🔍</i>
                                <span>应用</span>
                            </button>
                        </div>
                    </div>
                    <div class="monthly-stats-controls">
                        <div class="control-item">
                            <button id="toggle-monthly-view" class="view-toggle-btn">
                                <i class="icon">📊</i> 
                                <span class="btn-text">图表视图</span>
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 表格视图 -->
                <div id="monthly-stats-table-view" class="monthly-stats-content">
                    <div class="table-responsive monthly-stats-table-container">
                        <table id="monthly-stats-table">
                            <thead>
                                <tr>
                                    <th>RPA名称</th>
                                    <th>成功次数</th>
                                    <th>失败次数</th>
                                    <th>总执行次数</th>
                                    <th>成功率</th>
                                </tr>
                            </thead>
                            <tbody id="monthly-stats-body">
                                <!-- 月度统计数据将通过 JavaScript 动态填充 -->
                            </tbody>
                        </table>
                    </div>
                    <!-- 月度统计分页控件 -->
                    <div class="pagination-container">
                        <div class="pagination-info">
                            显示 <span id="monthly-showing-start">1</span>-<span id="monthly-showing-end">10</span> 条，共 <span id="monthly-total-records">0</span> 条
                        </div>
                        <div class="pagination-controls">
                            <button id="monthly-prev-page" class="pagination-btn" disabled>上一页</button>
                            <div id="monthly-page-numbers" class="page-numbers">
                                <!-- 页码将通过 JavaScript 动态填充 -->
                            </div>
                            <button id="monthly-next-page" class="pagination-btn">下一页</button>
                        </div>
                        <div class="pagination-size">
                            <label for="monthly-page-size">每页显示:</label>
                            <select id="monthly-page-size">
                                <option value="5" selected>5</option>
                                <option value="10">10</option>
                                <option value="20">20</option>
                                <option value="50">50</option>
                            </select>
                        </div>
                    </div>
                </div>
                
                <!-- 图表视图 -->
                <div id="monthly-stats-chart-view" class="monthly-stats-content" style="display: none;">
                    <canvas id="monthly-stats-chart"></canvas>
                </div>
            </div>
        </section>
    </div>

    <!-- Loading Dialog -->
    <div id="loading-dialog" class="loading-dialog">
        <div class="loading-dialog-content">
            <div class="loading-dialog-spinner"></div>
            <div class="loading-dialog-text">处理中，请稍候...</div>
        </div>
    </div>
    <script>    
         window.APP_CONFIG = {
            websocketHost: "{{ ws_host }}",
            websocketPort: "{{ ws_port }}",
        };
    </script>
    <script src="/static/js/main.js"></script>
</body>
</html> 